<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" :disabled="onlyview">
    <el-form-item label="能力点名称" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="能力方向" prop="directionId">
      <el-select v-model="ruleForm.directionId" filterable placeholder="请选择能力方向">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="能力详情" prop="description">
      <el-input v-model="ruleForm.description" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" class="text" />
    </el-form-item>
    <el-form-item label="关联知识点" prop="skills">
      <el-cascader
        v-model="ruleForm.skills"
        :show-all-levels="false"
        :options="skills"
        :props="props"
        clearable
      />
    </el-form-item>
    <el-form-item label="重要级别" prop="level">
      <el-rate v-model="ruleForm.level" />
    </el-form-item>
    <el-form-item label="平行能力" prop="balanceAbility">
      <el-input v-model="ruleForm.balanceAbility" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" class="text" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { stringToIntArray } from '@/utils/myutil'
export default {
  name: 'AbilityInfoEdit',
  data() {
    return {
      props: { multiple: true, label: 'name', value: 'id' },
      editId: undefined,
      onlyview: false,
      ruleForm: {
        id: '',
        name: '',
        directionId: '',
        description: '',
        skills: '',
        level: 1,
        difficulty: '0',
        balanceAbility: ''
      },
      options: null,
      skills: null,
      rules: {
        name: [
          { required: true, message: '请输入能力点名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        directionId: [
          { required: true, message: '请选择能力方向', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入能力详情', trigger: 'blur' }
        ],
        skills: [
          { required: true, message: '请选择知识点级联', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择重要级别', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请选择难易度', trigger: 'blur' }
        ],
        balanceAbility: [
          { required: true, message: '请输入平行能力', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getDirection()
    this.getSkills()
    this.editId = this.$store.getters.params.id
    this.onlyview = this.$store.getters.params.onlyview !== undefined
    if (this.editId !== undefined) {
      this.ruleForm.id = this.editId
      this.get('ability-info/getone', (result) => {
        this.extend(this.ruleForm, result.data)
        const a = []
        const b = this.ruleForm.skills.split(',')
        for (let i = 0; i < b.length; i++) {
          a.push(stringToIntArray(b[i], '|'))
        }
        this.ruleForm.skills = a
      }, { id: this.editId })
    } else {
      this.reset()
    }
  },
  methods: {
    reset() {
      this.ruleForm = {
        id: '',
        name: '',
        directionId: '',
        description: '',
        skills: '',
        level: 1,
        difficulty: '0',
        balanceAbility: ''
      }
    },
    getDirection() {
      this.get('ability-direction/query', result => {
        this.options = result.data
      }, { isDel: 1 })
    },
    getSkills() {
      this.get('skill/list', result => {
        this.skills = result.data
      }, { id: 0, isDel: 1 })
    },
    onSubmit() {
      const a = []
      for (let i = 0; i < this.ruleForm.skills.length; i++) {
        a.push(this.ruleForm.skills[i].join('|'))
      }
      this.ruleForm.skills = a
      this.post('/ability-info/save', 'ruleForm', result => {
        this.redirect('AbilityInfo')
      }, this.ruleForm)
    }
  }
}
</script>
<style scoped>
</style>
